import Menu from 'antd/lib/menu'
import { RouterState } from 'connected-react-router'
import React from 'react'
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { UserInfo } from '../../consts/auth'
import { isAuth } from '../../helpers/auth'
import { AppState } from '../../store/reducers'

const MenuItemList = [
    {
        key:'',
        name:"首页"
    },
    {
        key:'shop',
        name:"商城"
    },
   
]
const Navigation = () => {
    const userData = isAuth();
    const ortherItemList = [];
    if( userData ){
        const {
            user
        } = userData as UserInfo;
        ortherItemList.push({
            key:user.role === 0 ? 'user/dashboard' : 'admin/dashboard',
            name:"dashboard"
        })
    } else {
        ortherItemList.push({
            key:'signin',
            name:"登录"
        },
        {
            key:'signup',
            name:"注册"
        })
    }
    const router = useSelector<AppState, RouterState>(state => state.router);
    return (
        <Menu mode="horizontal" selectable={true} selectedKeys={[router.location.pathname]}>
            {
                MenuItemList.map(item=>(
                    <Menu.Item key={item.key}>
                        <Link to={`/${item.key}`}>{item.name}</Link>
                    </Menu.Item>
                ))
            }
            {
                ortherItemList.map(item=>(
                    <Menu.Item key={item.key}>
                        <Link to={`/${item.key}`}>{item.name}</Link>
                    </Menu.Item>
                ))            
            }
        </Menu>
    )
}

export default Navigation
